<template>
  <div class="PageActivitiesDetail">
    <transition name="fade">
      <div v-if="shop.activitiesVisible" class="content">
        <h2 class="shop-name">{{shop.name}}</h2>
        <section class="shop-rating">
          <h4 class="label">商家评分</h4>
          <RatingStar :value="shop.rating" :textEnabled="true"/>
        </section>
        <section class="shop-notice">
          <h4 class="label">商家公告</h4>
          <p>{{shop.notice}}</p>
        </section>
        <section class="activities-list">
          <h4 class="label">优惠信息</h4>
          <ul>
            <li v-for="item in shop.activities" :key="item.id">
              <span class="icon" :style="iconStyle('#'+item.icon_color)">{{item.icon_name}}</span>
              <span>{{item.description}}（APP专享）</span>
            </li>
          </ul>
        </section>

        <svg class="close-button" width="60" height="60" @click.stop="shop.close">
          <circle cx="30" cy="30" r="25" stroke="#555" stroke-width="1" fill="none"></circle>
          <line x1="22" y1="38" x2="38" y2="22" style="stroke:#999;stroke-width:2"></line>
          <line x1="22" y1="22" x2="38" y2="38" style="stroke:#999;stroke-width:2"></line>
        </svg>
      </div>
    </transition>
  </div>
</template>

<script>
import RatingStar from '../../../components/RatingStar';
export default {
  props: ['shop'],
  methods: {
    iconStyle(color) {
      return { backgroundColor: color, borderColor: color };
    }
  },
  components: {
    RatingStar
  }
};
</script>

<style lang="scss">
.PageActivitiesDetail {
  .content {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 20;
    padding: 1.5rem;
  }

  .shop-name {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }

  section {
    margin-bottom: 1rem;

    .label {
      font-size: 0.8rem;
    }
  }

  .RatingStar {
    top: 0.4rem;
  }

  .shop-notice p {
    line-height: 2;
    font-size: 0.6rem;
  }

  .activities-list {
    font-size: 0.6rem;
    li {
      padding: 0.2rem 0;
    }

    .icon {
      padding: 0 0.02rem;
      display: inline-block;
      line-height: 0.6rem;
      border: 0.025rem solid #fff;
      border-radius: 0.1rem;
      color: #fff;
      margin-right: 0.1rem;
    }
  }

  .close-button {
    bottom: 1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
}
</style>
